* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: hsl(0, 0%, 100%);
    }

    nav {
      position: sticky;
      top: 0px;
      z-index: 1000;
      max-width: 1520px;
      margin: 30px auto;
      padding: 1.2rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border-radius: 50px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      border: 1px solid #a1a1a1;
    }

    .logo {
      font-size: 1.7rem;
      font-weight: bold;
      color: #2c3e50;
    }

    .nav-center {
      display: flex;
      gap: 2rem;
    }

    .nav-center a {
      position: relative;
      text-decoration: none;
      color: #2c3e50;
      font-weight: 500;
      font-size: 15px;
      padding: 6px 0;
      transition: color 0.3s ease;
    }

    .nav-center a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0%;
      height: 2px;
      background-color: #4a74ff;
      transition: width 0.3s ease;
    }

    .nav-center a:hover::after {
      width: 100%;
    }

    /* ✅ Right Side Rounded Button */
    .nav-right a {
      text-decoration: none;
      background: #4a74ff;
      color: #fff;
      padding: 10px 22px;
      border-radius: 50px;
      font-weight: 500;
      font-size: 15px;
      box-shadow: 0 4px 12px rgba(74, 116, 255, 0.3);
      transition: all 0.3s ease;
    }

    .nav-right a:hover {
      background: #355de0;
      transform: translateY(-1px);
    }
        /* ─── Search Bar ───────────────────────────── */
    .search-box{
        position:relative;
        display:flex;
        align-items:center;
    }
    .search-box input{
      width:200px;
      max-width:60vw;
      padding:9px 40px 9px 16px;
      border:1px solid #bfc9ff;
      border-radius:50px;
      font-size:14px;
      transition:all .3s ease;
    }
    .search-box input::placeholder{
        color:#9aa2d4;
    }
    .search-box input:focus{
      outline:none;border-color:#4a74ff;
      box-shadow:0 0 0 3px rgba(74,116,255,.25);
    }
    /* search icon */
    .search-box::after{
      content:'🔍'; /* simple emoji icon */
      position:absolute;right:14px;pointer-events:none;
      font-size:16px;color:#6d7be9;
    }


    @media (max-width: 768px) {
      nav {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        border-radius: 25px;
      }

      .nav-center {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
      }

      .nav-right a {
        width: 100%;
        text-align: center;
      }
     .search-box input{width:100%;}

    }

    .back-link{
  position:absolute;
  top:150px;
  right:220px;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.95rem;
  color:#333;
  text-decoration:none;
  transition:transform .25s ease;
  
}
.back-link:hover{transform:translateX(4px)}
.back-link img{width:35px;height:35px;display:block}


    .container {
      width: 100%;
      max-width: 1100px;
      background-color:rgb(188, 222, 249) ;
      border: 2px solid #ccc;
      padding: 20px;
      margin: 0 auto;
      margin-bottom: 20px;
            animation: fadeInUp 1s ease forwards;

    
  }

  

    .top-heading {
      margin: 0;
      padding-bottom: 20px;
      font-size: 2rem;
      text-align: left;
      font-size: 20px;
    }

    .row1 {
      display: flex;
      gap: 40px; /* Horizontal gap between headings */
      flex-wrap: wrap;
      margin-bottom: 20px;
     text-align: left;
      font-size: 14px;



    }
.row2{
      display: flex;
      text-decoration:underline;
     gap:20px;
           text-align: left;
      font-size: 16px;

}

    @media (max-width: 600px) {
      .top-heading {
        font-size: 1.5rem;
      }
      .row1 {
        flex-direction: column;
      }
      .row2{
        flex-direction: column;
      }
    }
      .wrapper {
    width:100%;
     max-width:1100px;
    border:2px solid #000;           /* पूरे layout के लिए काला बॉर्डर */
    padding:20px;
    margin: 0 auto; /* Center wrapper horizontally reliably */
    margin-top: 100px;
    margin-bottom: 30px;

  
    
    
  }


      .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
    width:100%;
     max-width:1100px;
    margin-bottom:20px;

    margin-top: 30px;
    background-color: #ededed;
    padding: 30px;
        margin: 0 auto;
    
    
  }

  .card1 {
        background-color: rgb(255, 97, 40);
 border:1px solid #ddd; 
 border-radius:5px;
    padding:50px;
     text-align:center;
    cursor:pointer;
        padding-top: 70px; 
 transition: transform .3s, box-shadow .3s;
 font-size: 18px;
   
  }
  .card1:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        border: 2px solid black;

  }

    .card2 {
        background-color: rgb(255, 97, 40);
 border:1px solid #ddd; font-size: 18px;
 border-radius:5px;
    padding:50px;
    padding-top: 70px; 
    text-align:center;
    cursor:pointer;
    transition: transform .3s, box-shadow .3s;
  }
  .card2:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    border: 2px solid black;
  }

    .card3 {
        background-color: rgb(218, 218, 218);
 border:1px solid #ddd;
  font-size: 18px;
   border-radius:5px;
    padding:50px;
     text-align:center;
    cursor:pointer;
    transition: transform .3s, box-shadow .3s;
  }
  .card3:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        border: 2px solid black;

  }

  .card4 {
        background-color: rgb(78, 156, 88);
 border:1px solid #ddd; 
 border-radius:5px;
    padding:50px;
     font-size: 18px;

     text-align:center;
    cursor:pointer;
    transition: transform .3s, box-shadow .3s;
  }
  .card4:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        border: 2px solid black;

  }
  



  .expandable{
    width:100%; max-width:1100px;
          background: linear-gradient(to right, #e8e8e8, #f6f8fb);

     border:1px solid #ddd; 
     border-radius:8px;
    padding:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);
    display:none;
        margin: 0 auto;
              margin-top: 20px;

  }
  .expandable.open {
    display:block;
    animation: fadeSlide 0.3s ease forwards;
  }
  @keyframes fadeSlide {
    from { opacity:0; transform: translateY(-10px); }
    to { opacity:1; transform: translateY(0); }
  }

  .setting {
    display:flex; justify-content: space-between;
    align-items:center; padding:12px 0;
    border-bottom:1px solid #eee;
  }
  .setting:last-child { border-bottom:none; }

  .switch { position:relative; width:40px; height:20px; }
  .switch input { opacity:0; width:0; height:0; }
  .slider {
    position:absolute; inset:0;
    background:#f81d1d; transition:.4s; border-radius:20px;
  }
  .slider:before {
    content:""; position:absolute; width:14px; height:14px;
    left:3px; top:3px; background:#fff;
    transition:.4s; border-radius:50%;
  }
  .switch input:checked + .slider {
    background:#3d764f;
  }
  .switch input:checked + .slider:before {
    transform: translateX(20px);
  }

  .buttons {
    display:flex; justify-content:flex-end; gap:10px;
    margin-top:20px;
  }
  .btn {
    padding:8px 16px; border:none; border-radius:4px;
    color:#fff; cursor:pointer;
    transition: background .3s ease;
  }
  .btn.primary { background:#3d764f;}
  .btn.secondary { background:#f81d1d; }
  .btn.primary:hover { background:#285235; }
  .btn.secondary:hover { background:#cd1616;  }

  

  @media(max-width:800px){
    .grid { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
  }
  @media(max-width:600px){
    .setting { flex-direction:column; align-items:flex-start; gap:6px; }
    .buttons { flex-direction:column-reverse; align-items:flex-end; }
  }

    .footer-buttons {
    
    display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;

  
  }

.footer-buttons #b1 {
    padding:8px 16px;
    border:none;
    border-radius:4px;
    background:#436df8;
    color:#fff;
    cursor:pointer;
    transition: background .3s;
    margin-top: 20px;
  }
  .footer-buttons #b1:hover {
    background:#2949b2;

  }
  .footer-buttons #b2 {
    padding:8px 16px;
    border:none;
    border-radius:4px;
    background:#2e5372;
    color:#fff;
    cursor:pointer;
    transition: background .3s;
    margin-top: 20px;
  }
  .footer-buttons #b2:hover {
    background:#1b3042;

  }

  .footer-buttons #b3 {
    padding:8px 16px;
    border:none;
    border-radius:4px;
    background:#3d764f;
    color:#fff;
    cursor:pointer;
    transition: background .3s;
    margin-top: 20px;
  }
  .footer-buttons #b3:hover {
     background:#285235;
     }

  


  @media(max-width:800px) {
    .grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
    .footer-buttons {
      position:static;
      margin-top:20px;
      justify-content:flex-end;
    }
  }
      :root {
      --primary: #0066ff;
      --danger: #dc3545;
      --success: #198754;
      --gray: #f1f1f1;
      --border: #dcdcdc;
    }


      .container1 {
                background: linear-gradient(to right, #e8e8e8, #f6f8fb);

      padding: 30px;
     box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
       width: 100%;
      max-width: 1100px;
     border:1px solid #ddd; 
     border-radius:8px;
      padding: 20px;
      margin: 0 auto;
      margin-bottom: 20px;
      margin-top: 30px;

    }

    h3 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 24px;
      color: #333;
    }

    .top-controls {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;
      align-items: flex-end;
    }

    .top-controls > div {
      flex: 1;
    }

    .top-controls .action-remarks {
      flex: 2;
    }

    label {
      font-weight: 500;
      margin-bottom: 6px;
      display: block;
      color: #444;
    }

    select, textarea {
      padding: 12px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      background-color: #fff;
      transition: border-color 0.2s ease;
    }

    textarea {
      height: 40px;
      resize: vertical;
    }

    select:focus, textarea:focus {
      border-color: var(--primary);
      outline: none;
    }

    .add-btn {
      background:#f81d1d;
      color: white;
      padding: 13px 26px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      height: 48px;
      transition: background 0.2s;
      white-space: nowrap;
     margin-left:30px;
      margin-top:-35px;
    }

    .add-btn:hover {
      background:#cd1616; 
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 28px;
    }

    thead {
      background: var(--gray);
    }

    th, td {
      padding: 14px 12px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    th {
      font-weight: 600;
      color: #222;
    }

    .input-cell {
      background: #f9f9f9;
      border: 1px solid #e2e2e2;
      padding: 10px;
      border-radius: 6px;
    }

    td input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-family: 'Poppins', sans-serif;
    }

    .icon-actions {
      display: flex;
      gap: 12px;
      font-size: 16px;
    }

    .icon-actions i {
      cursor: pointer;
      color: #555;
      transition: color 0.2s ease;
    }

    .icon-actions i:hover {
      color: var(--primary);
    }

    .bottom-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 14px;
    }

    .btn {
      padding: 12px 28px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .btn.draft { background: #6c757d; }
    .btn.rework { background: #343a40; }
    .btn.submit { background: var(--success); }

    .btn.draft:hover { background: #5a6268; }
    .btn.rework:hover { background: #23272b; }
    .btn.submit:hover { background: #157347; }

    @media (max-width: 768px) {
      .top-controls {
        flex-direction: column;
      }
      .bottom-buttons {
        flex-direction: column;
        align-items: flex-end;
      }
    }